<template>
    <div class="userList">
        <div class="header">
            <el-row>
                <el-col :span="22">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>分类列表</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-col>
                <el-col :span="2">
                    <el-button type="success" size="mini" @click="addUser">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                height="69vh"
                :data="listMaterialClassify"
                stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="classifyCode"
                    label="分类编码"
                   >
            </el-table-column>
            <el-table-column
                    prop="classifyName"
                    label="分类名称"
                    >
            </el-table-column>
            <el-table-column
                    width="200"
                    label="操作">
                <template slot="header">
                    <el-input

                            size="mini"
                            @input="getSearch"
                            v-model="search"
                            prefix-icon="el-icon-search"
                            placeholder="请输入材料"></el-input>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="upd(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" >
            <el-form :model="addUserFrom" :rules="rules" ref="from" label-width="100px">
<!--                <el-form-item label="分类编码:" prop="classifyCode">-->
<!--                    <el-input v-model="addUserFrom.classifyCode" autocomplete="off" :disabled="addUserFrom.update"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="分类名称:" prop="classifyName">
                    <el-input v-model="addUserFrom.classifyName"
                              autocomplete="off">

                    </el-input>
                </el-form-item>
                <el-form-item label="选择父级分类" >
                        <el-select placeholder="请选择" v-model="addUserFrom.classifyCode">
                            <el-option
                                    v-for="item in listMaterialClassify"
                                    :key="item.classifyCode"
                                    :label="item.classifyName"
                                    :value="item.classifyCode">
                            </el-option>
                        </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination
                :page-size="10"
                :pager-count="11"
                layout="prev, pager, next"
                @current-change="pageNum"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
    import {listMaterialClassify,delMaterialClassify,addMaterialClassify,updateMaterialClassify} from "../../network/business";

    export default {
        name: "index",
        data(){
            return {
                search:'',
                dialogFormVisible:false,
                disabled:false,
                title:"新增分类",
                rules: {
                    classifyName:[
                        { required: true, message: '请输入分类', trigger: 'blur' },
                    ],
                    classifyCode:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                },

                addUserFrom:{
                    classifyCode:"",
                    classifyName:"",
                    update:false
                },
                defaddUserFrom:{
                    name:"",
                    pass:"",
                    update:false
                },
                totalSize:0,
                data:{
                    pageNum:1,
                    pageSize:10
                },
                listMaterialClassify:[]
            }
        },
        created() {
            this.getlistMaterialClassify()
        },
        methods:{
            getSearch(){
                this.data.pageNum=1
                console.log(11)
                this.data.searchVal=this.search
                this.getlistMaterialClassify()
            },
            pageNum(e){
                this.data.pageNum=e
                this.getlistMaterialClassify()
            },
            async getlistMaterialClassify(){
                let status = await listMaterialClassify(this.data)
                if(status.code==200){

                    this.listMaterialClassify=status.data.content
                    this.totalSize=status.data.totalSize

                }else{
                    this.$error(status.msg)
                }
            },
            upd(){
                this.$message.error('该功能暂时未开放！')
                return
                // this.addUserFrom.classifyCode=row.classifyCode
                // this.addUserFrom.classifyName=row.classifyName
                // this.addUserFrom.update=true
                // this.dialogFormVisible=true,
                //  this.title='修改用户'

            },
            del(row){
                this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let data={
                        classifyCode:row.classifyCode
                    }
                    let status = await delMaterialClassify(data)
                    if(status.code==200){
                        this.$success('成功删除!')
                        this.getlistMaterialClassify()
                    }
                    else{
                        this.$success(status.msg)
                    }


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            addUser(){
                this.dialogFormVisible=true
            },
            cancel(){
                this.dialogFormVisible=false
                this.addUserFrom=Object.assign({},this.defaddUserFrom)
            },
            confirm(){

                this.$refs.from.validate(async v=>{
                    if(!v)return
                    if(!this.addUserFrom.update){
                        let data ={
                            classifyName:this.addUserFrom.classifyName,
                            classifyCode:this.addUserFrom.classifyCode
                        }
                        let status = await addMaterialClassify(data)
                        if(status.code==200){
                            this.$success("添加分类成功！")
                            this.getlistMaterialClassify()
                        }else {
                            this.$error(status.msg)
                        }
                    }
                    else{
                        this.$message.error('功能暂时未开放 ！')

                        let status=await updateMaterialClassify(this.addUserFrom)
                        if(status.code==200){
                            this.$success("修改成功")
                            this.getlistMaterialClassify()
                        }else{
                            this.$error(status.msg)
                        }

                    }
                    this.dialogFormVisible=false
                })
                this.addUserFrom=Object.assign({},this.defaddUserFrom)
            }
        }
    }
</script>

<style scoped lang="sass">
    .header
        margin-bottom: 20px
        .el-select
            width: 100%
        ::v-deep .el-dialog
            width: 30%
            border-radius: 5px

</style>